import React, { useState } from 'react'

import './index.css'
const Index = () => {

  //上边图片
  let list = [
    {
      id: 1,
      title: "精选推荐",
      img: require('../../img/1.png')
    },
    {
      id: 2,
      title: "文档",
      img: require('../../img/2.png')
    },
    {
      id: 3,
      title: "白板",
      img: require('../../img/3.png')
    },
    {
      id: 4,
      title: "演示文稿",
      img: require('../../img/4.png')
    },
    {
      id: 5,
      title: "社交媒体",
      img: require('../../img/5.png')
    },
    {
      id: 6,
      title: "视频",
      img: require('../../img/6.png')
    },
    {
      id: 7,
      title: "平面物料",
      img: require('../../img/7.png')
    },
    {
      id: 8,
      title: "网站",
      img: require('../../img/8.png')
    },
    {
      id: 9,
      title: "更多",
      img: require('../../img/9.png')
    },
  ]
  //tab切换内容
  let arr: any = [
    {
      id: 1,
      name: ["a", "b", "c", "d", "e"],

    },
    {
      id: 2,
      name: ["b", "c", "d", "e"]
    },
    {
      id: 3,
      name: ["c", "d", "e"]
    },
    {
      id: 4,
      name: ["d", "e"]
    },
    {
      id: 5,
      name: ["e", "v"]
    },
    {
      id: 6,
      name: ["f", "g", "h", "i"]
    },
    {
      id: 7,
      name: ["g", "h", "i"]
    },
    {
      id: 8,
      name: ["h", "i"]
    },
    {
      id: 9,
      name: ["i", "v"]
    }
  ]
  //中间图片
  let zlist = [
    {
      id: 1,
      title: "文档",
      img: require('../../img/z1.png')
    },
    {
      id: 2,
      title: "白板",
      img: require('../../img/z2.png')
    },
    {
      id: 3,
      title: "演示文稿",
      img: require('../../img/z3.png')
    },
    {
      id: 4,
      title: "Logo",
      img: require('../../img/z4.png')
    },
    {
      id: 5,
      title: "名片(横版)",
      img: require('../../img/z5.png')
    },
    {
      id: 6,
      title: "海报(竖版)",
      img: require('../../img/z6.png')
    },
    {
      id: 7,
      title: "手机海报",
      img: require('../../img/z7.png')
    },
    {
      id: 8,
      title: "微信公众号封面",
      img: require('../../img/z8.png')
    },
    {
      id: 9,
      title: "小红书帖子",
      img: require('../../img/z9.png')
    },
  ]
  //下边照片
  let xlist = [
    {
      id: 1,
      img: require('../../img/x1.png')
    },
    {
      id: 2,
      img: require('../../img/x2.png')
    },
    {
      id: 3,
      img: require('../../img/x3.png')
    },
    {
      id: 4,
      img: require('../../img/x4.png')
    },
    {
      id: 5,
      img: require('../../img/x5.png')
    },
    {
      id: 6,
      img: require('../../img/x6.png')
    },
    {
      id: 7,
      img: require('../../img/x7.png')
    }
  ]
  //底部照片
  let dilist = [
    {
      id: 1,
      img: require('../../img/di1.png'),
      name: "开始使用Canva可画"
    },
    {
      id: 2,
      img: require('../../img/di2.png'),
      name: "未命名的设计"
    },
    {
      id: 3,
      img: require('../../img/di3.png'),
      name: "橙白色课堂笔记简约企业分享中文文档"
    },
    {
      id: 4,
      img: require('../../img/di4.png'),
      name: "未命名的设计"
    },
  ]


  let [key, setkey] = useState(1)
  const dian = (id: number) => {
    console.log(id);
    setkey(id)
  }
  return (
    <div className='box'>
      <div className='shang'>
        <div className='ss'>
          <span>今天你想设计什么?</span>

          <button>自定义大小</button>
          <button>上传</button>
        </div>
        <div className='sz'>
          <input type="text" placeholder='搜索模版或你的设计' />
        </div>
        <div className='sx'>
          <div className='type' >
            {
              list && list.map(item => {
                return <div className='tu' key={item.id} onClick={() => dian(item.id)}>
                  <img src={item.img} alt="" />
                  <p>{item.title}</p>
                </div>
              })
            }
          </div>


        </div>
      </div>
      <h2>你可能想尝试...</h2>
      <div className='zhong' style={{ display: "flex", flexDirection: "column" }}>
        <div className='ztype'>
          {
            zlist && zlist.map(item => {
              return <div className='ztu'>
                <img src={item.img} alt="" />
                <p>{item.title}</p>

              </div>
            })
          }

        </div>
        <div className='xia'>
          <h2>值得一试的热门工具</h2>
          {
            arr && arr.find((item: any) => item.id == key)?.name?.map((item: any) => item)
          }


          {
            key && key % 2 == 0 ? <div className='xtype'>
              {
                xlist && xlist.map(item => {
                  return <div className='xtu'>
                    <img src={item.img}></img>

                  </div>
                })
              }
            </div> : <div className='di'>
              <h2>最近的设计</h2>
              <div className='ditype'>
                {
                  dilist && dilist.map(item => {
                    return <div className='dilistt'>
                      <img src={item.img}></img>
                      <p>{item.name}</p>
                    </div>
                  })
                }
              </div>
            </div>
          }



        </div>


      </div>


    </div>
  )
}

export default Index
